<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">

    <!-- jsoneditor -->
    <link rel="stylesheet" type="text/css" href="jsoneditor.css">
    <script type="text/javascript" src="jsoneditor.js"></script>

    <!-- ace code editor -->
    <script type="text/javascript" src="lib/ace/ace.js"></script>
    <script type="text/javascript" src="lib/ace/mode-json.js"></script>
    <script type="text/javascript" src="lib/ace/theme-textmate.js"></script>
    <script type="text/javascript" src="lib/ace/theme-jsoneditor.js"></script>

    <!-- json lint -->
    <script type="text/javascript" src="lib/jsonlint/jsonlint.js"></script>

    <style type="text/css">
        body {
            font: 10.5pt arial;
            color: #4d4d4d;
            line-height: 150%;
            width: 500px;
        }

        code {
            background-color: #f5f5f5;
        }

        #jsoneditor {
            width: 700px;
            height: 500px;
        }
    </style>
</head>
<body>



<div id="jsoneditor"></div>

<script type="text/javascript" >
    var container = document.getElementById('jsoneditor');

    var options = {
        mode: 'code',
        modes: ['code', 'form', 'text', 'tree', 'view'], // allowed modes
        error: function (err) {
            alert(err.toString());
        }
    };

    var json = {
        "array": [1, 2, 3],
        "boolean": true,
        "null": null,
        "number": 123,
        "object": {"a": "b", "c": "d"},
        "string": "Hello World"
    };

    var editor = new jsoneditor.JSONEditor(container, options, json);


</script>
</body>
</html>
